// React + TS

// 通过泛型参数， 明确指定数据类型

import { useState } from "react"

type User = {
  name:string,
  age:number
}

function App() {
  // 1.限制useState函数参数的初始值必须满足类型为User，或者是一个返回值为User的函数
  // const [user, setUser] = useState<User>({name: 'Tom', age: 18})
  // const [user, setUser] = useState<User>(() => {
  //   return {
  //     name: 'Tom',
  //     age: 18
  //   }
  // })

  // 2.限制setUser函数参数的参数类型为User，或者是一个返回值为User的函数，或者是undifined
  const [user, setUser] = useState<User>({name: 'Tom', age: 18})
  const changeUser = () => {
    // setUser({
    //   name: 'john',
    //   age: 28
    // })
    // setUser(() => {
    //   return {
    //     name: 'john',
    //     age: 28
    //   }
    // })
    
    
    // 仅当useState没有初始值的时候，setUser才可以设置为undifined，若有初始值，则setUser必须为User类型
    // setUser(undefined)
  }
  
  return (
    <>
      This is App
      {/* 3.user状态数据具备User类型相关的类型提示 */}
      <div>
        姓名：{user.name}，年龄：{user.age}
      </div>
    </>
  )
}

export default App
